<html>
    <head>
        <style>
            #upload-process{
                width: 1000px;
                height: 300px;
                border: solid 1px black;
                margin-top: 20px;
            }
        </style>
        <link href="__STATIC__/plugins/web-uploader-1.7/css/uploader.all.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <button id="upload-button">点击上传</button>
        <div id="upload-process"></div>
        <div id="log"></div>
        <script type="text/javascript" src="__STATIC__/plugins/web-uploader-1.7/js/Q.js"></script>
        <script type="text/javascript" src="__STATIC__/plugins/web-uploader-1.7/js/spark-md5.js"></script>
        <script type="text/javascript" src="__STATIC__/plugins/web-uploader-1.7/js/Q.md5File.js"></script>
        <script type="text/javascript" src="__STATIC__/plugins/web-uploader-1.7/js/Q.Uploader.js"></script>
        <script type="text/javascript" src="__STATIC__/plugins/web-uploader-1.7/js/Q.Uploader.slice.js"></script>
        <script type="text/javascript" src="__STATIC__/plugins/web-uploader-1.7/js/Q.Uploader.UI.File.js"></script>
        <!-- <script type="text/javascript" src="__STATIC__/plugins/web-uploader-1.7/Q.Uploader.file.all.js"></script> -->
        <script>
            function log(msg) {
                document.getElementById("log").innerHTML += (msg != undefined ? msg : "") + "<br />";
            }
            var chunk_size = 5 * 1024 * 1024;
            new Q.Uploader({
                url:"upload/file",
                target: document.getElementById('upload-button'),    //上传按钮,可为数组 eg:[element1,element2]
                view:document.getElementById('upload-process'),
                html5: true,
                multiple: true,
                data:{
                    'author':'fcesky',
                    'chunk_size':chunk_size
            },
                // dataType: "json",
                upName: "file",
                isDir: false,
                maxSize: 0,
                isSlice: true,
                chunkSize: chunk_size,
                isQueryState:true,
                // isMd5: true,
                // isUploadAfterHash:true,
                sliceRetryCount:1,
                //上传回调事件(function)
                on: {
                    init: function(){ },              //上传管理器初始化完毕后触发
                    select: function(task){ },        //点击上传按钮准备选择上传文件之前触发,返回false可禁止选择文件
                    add: function(task){
                        // if (task.disabled) return alert("允许上传的文件格式为：" + this.ops.allows);
                        log(task.name + ": 已添加!");
                     },           //添加任务之前触发,返回false将跳过该任务
                    upload: function(task){  
                        task.data = {
                             name: task.name + "_" + Date.now(),
                             file_size:task.size,
                             ext:task.ext
                            };
                     },        //上传任务之前触发,返回false将跳过该任务
                    hashProgress: function(task){ },  //文件hash进度（仅isMd5为true时有效）
                    hash: function(task,pvg){
                        // document.title = "hash: " + (pvg * 100).toFixed(2) + "%";
                     },          //查询状态之前触发（for 秒传或续传）
                    sliceQuery: function(task){
                        
                        log(task.name + ": " + task.queryUrl);

                        // task.data.sliceQuery = 1;
                     },  
                    //分片上传之前触发（for 秒传或续传）
                    sliceUpload: function (task) {
                        log(task.name + ": 上传分片 " + task.sliceIndex + " / " + task.sliceCount);
                        
                        //返回false将跳过该分片
                        //callback(false);

                        // callback();
                },  //分片上传之前触发，返回false将跳过该分片
                    send: function(task){
                        // task.data.send = 1;
                     },          //发送数据之前触发,返回false将跳过该任务
                    cancel: function(task){ },        //取消上传任务后触发
                    remove: function(task){
                        log(task.name + ": 已移除!");
                     },        //移除上传任务后触发
                    progress: function(task){ },      //上传进度发生变化后触发(仅html5模式有效)
                    complete: function(task){
                        var json = task.json;
                        console.log(json);
                     }       //上传完成后触发
                },
            });
        </script>
    </body>
</html>